<template>
	<view class="content">
		<view class="info_card">
			<view class="date" @click="monthPickerShow = true">{{selectMonth}} ∨</view>
			<view class="number">9887.23 <span></span></view>
			<view class="name">本月支出(元)</view>
			<view class="bottom_box">
				<view class="box_item">
					<view class="num">1000.00</view>
					<view class="name">本月收入(元)</view>
				</view>
				<view class="box_item">
					<view class="num">1000.00</view>
					<view class="name">结余(元)</view>
				</view>
			</view>
		</view>
		<view class="detail_box">
			<view class="detail_title">
				<view class="left">
					<text class="dot">●</text>
					<text class="num">1.20</text>
					星期五
				</view>
				<view class="right">
					<text class="red">支出:</text> 25.00
					<text class="green">收入:</text> 10.00
				</view>
			</view>
			<view class="detail_list">
				<view class="list_item" v-for="item in 5" :key="item">
					<view class="icon">
						😊
					</view>
					<view class="info">
						<view class="name">
							水果
						</view>
						<view class="time">
							18.30
						</view>
					</view>
					<view class="price">
						+10.00
					</view>
				</view>
			</view>

		</view>
		<u-datetime-picker :show="monthPickerShow" :value="selectMonth" mode="year-month"
			@cancel="monthPickerShow = false" @confirm="timeconfirm"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				monthPickerShow: false,
				selectMonth: ""
			}
		},
		onReady() {
		},
		onLoad() {
			this.selectMonth = uni.$u.timeFormat(new Date(), 'yyyy-mm');
			this.getBillData(this.selectMonth)
		},
		onShow() {},
		methods: {
			getBillData(selectMonth) {
				const currentDate = new Date(selectMonth); // 获取当前日期时间
				const year = currentDate.getFullYear(); // 获取当前年份，比如2023年
				const month = currentDate.getMonth(); // 获取当前月份，月份是从0开始计算的，所以4代表五月
				
				// 获取当前月份的第一天（即1号）的时间对象
				const firstDayOfMonth = new Date(year, month, 1); 
				// 获取当前月份的最后一天的时间对象。month + 1 表示下一个月，日期为0表示当前月最后一天
				const lastDayOfMonth = new Date(year, month + 1, 0);
				console.log("000000000000000000----", firstDayOfMonth.getTime(), lastDayOfMonth.getTime())
				
				const db = uniCloud.databaseForJQL()
				let tempBill = db.collection('Transactions')
				.where(`user_id==$cloudEnv_uid&&date<${lastDayOfMonth.getTime()}&&date>=${firstDayOfMonth.getTime()}`)
				.getTemp()
				db.collection(tempBill, 'Categories')
					.get().then(res => {
						console.log('------', res)
					})
			},
			timeconfirm(a, b) {
				this.monthPickerShow = false
				this.selectMonth = uni.$u.timeFormat(a.value, 'yyyy-mm')
				this.getBillData(this.selectMonth)
			},
		}
	}
</script>

<style lang="scss">
	.red {
		color: red;
	}

	.green {
		color: #01CD83;
	}

	.info_card {
		width: 690rpx;
		background-color: #01CD83;
		margin: 20rpx auto;
		border-radius: 12rpx;
		color: #fff;
		padding: 30rpx;
		box-shadow: 0 0 6rpx 6rpx #01CD83;

		.number {
			font-size: 66rpx;
			font-weight: bold;
		}

		.bottom_box {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
		}
	}

	.detail_box {
		width: 690rpx;
		margin: 0 auto;
		padding-top: 1rpx;

		.detail_title {
			display: flex;
			justify-content: space-between;
			font-size: 34rpx;

			.left {
				.dot {
					color: #01CD83;
				}

				.num {
					font-size: 38rpx;
					font-weight: bold;
					margin: 0 10rpx;
				}
			}

			.right {
				text {
					margin: 0 10rpx;
				}
			}
		}

		.detail_list {
			.list_item {
				display: flex;
				gap: 10rpx;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1px solid #f5f5f5;

				.info {
					flex-grow: 1;
				}
			}
		}
	}
</style>